<template>
<form @submit="formSubmit">
<view class="container user-container">
    <view v-if="type == 'nickname'" class="label-input item">
        <text class="label">昵称</text>
        <input class="input" placeholder="请输入您的昵称" :value="user.nickname?user.nickname:user.user_id?user.user_id + '用户':'未登录'" name="nickname" auto-focus></input>
    </view>

    <block v-if="type == 'mobile'">
        <view class="label-input item">
            <text class="label">手机号</text>
            <input class="input" placeholder="请输入您的手机号" :value="user.mobile" name="mobile" data-name="mobile" type="number" @input="setMobile" auto-focus></input>
        </view>
        <view v-if="canGetCode" class="verify-box item" style="margin-top:40rpx;">
            <input class="verify-input" placeholder="请输入验证码" name="mobile_code"></input>
            <button class="verify-btn  " v-if="!is_send" @tap="getCode">获取短信验证码</button>
            <button class="verify-btn   countDownNum" v-if="is_send">{{countDownNum}}秒后重新发送</button>
        </view>
    </block>

    <view v-if="type == 'email'" class="label-input item">
        <text class="label">邮箱</text>
        <input class="input" placeholder="请输入您的邮箱" :value="user.email" name="email" auto-focus></input>
    </view>

    <block v-if="type == 'password'">
        <view class="label-input simple" v-if="user.password">
            <text class="label">旧密码</text>
            <input class="input" placeholder="旧密码" name="old_password" password auto-focus></input>
        </view>
        <view class="label-input simple">
            <text class="label">新密码</text>
            <input class="input" placeholder="新密码" name="new_password" password></input>
        </view>
        <view class="label-input simple item">
            <text class="label">确认密码</text>
            <input class="input" placeholder="确认密码" name="confirm_password" password></input>
        </view>
    </block>

    <block v-if="type == 'paypwd'">
        <view class="label-input simple item">
            <text class="label">手机号</text>
            <input class="input" placeholder="请输入您的手机号" :value="user.mobile" name="paypwd_mobile" :disabled="hasMobile" @input="setMobile" auto-focus></input>
        </view>
        <view v-if="canGetCode" class="verify-box item" style="margin-top:40rpx;">
            <input class="verify-input" placeholder="请输入验证码" name="paypwd_code"></input>
            <button class="verify-btn  " v-if="!is_send" @tap="getCode">获取短信验证码</button>
            <button class="verify-btn   countDownNum " v-if="is_send">{{countDownNum}}秒后重新发送</button>
        </view>
        <view class="label-input simple">
            <text class="label">新密码</text>
            <input class="input" placeholder="新密码" name="paypwd" password></input>
        </view>
        <view class="label-input simple item">
            <text class="label">确认密码</text>
            <input class="input" placeholder="确认密码" name="paypwd_confirm" password></input>
        </view>
    </block>

    <view v-if="type == 'sex'">
        <view class="gender-box">
            <view style="background-image:url({resourceUrl}}/static/images/bag.pn);" :class="'gender boy ' + (user.sex == 1 && 'boy-click')" @tap="changeGender" data-gender="boy"></view>
        </view>
        <view class="gender-box">
            <view style="background-image:url({resourceUrl}}/static/images/bag.pn);" :class="'gender girl ' + (user.sex == 2 && 'girl-click')" @tap="changeGender" data-gender="girl"></view>
        </view>
    </view>

    <button class="submit" form-type="submit">确认修改</button>
</view>
</form>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
var md5 = require("../../../utils/md5.js");
var common = require("../../../utils/common.js");

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      user: null,
      type: '',
      canGetCode: false,
      //是否能获取验证码
      timer: '',
      //定时器名字
      countDownNum: '60',
      //倒计时初始值
      is_send: false,
      hasMobile: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    this.setBarTitle(options.type);
    app.globalData.getConfig(function (res) {
      var sms_enable = common.getConfigByName(res.config, 'bind_mobile_sms_enable');
      var isEnable = sms_enable == 1 ? true : false;
      that.setData({
        canGetCode: isEnable
      });
    });
    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        hasMobile: userInfo.mobile != '' ? true : false,
        user: userInfo,
        type: options.type
      });
    }); //检验是否开启短信验证修改密码
    // request.get('/home/api/send_validate_code', {
    //   failRollback: true,
    //   successReload: true,
    //   data: {
    //     mobile: this.data.user.mobile,
    //     scene: 6,
    //     type: 'mobile',
    //   },
    //   success: function (res) {   
    //     that.setData({
    //       is_send_code: res.data.status
    //     })
    //   }
    // });
  },
  methods: {
    setBarTitle: function (type) {
      var title = '修改个人信息';

      if (type == 'nickname') {
        title = '修改昵称';
      } else if (type == 'mobile') {
        title = '修改手机';
      } else if (type == 'email') {
        title = '修改邮箱';
      } else if (type == 'password') {
        title = '修改密码';
      } else if (type == 'paypwd') {
        title = '修改支付密码';
      } else if (type == 'sex') {
        title = '修改性别';
      }

      uni.setNavigationBarTitle({
        title: title
      });
    },
    formSubmit: function (e) {
      var type = this.type;

      if (!type) {
        return;
      }

      var values = e.detail.value;

      if (type == 'nickname') {
        this.submitNickname(values);
      } else if (type == 'mobile') {
        this.submitMobile(values);
      } else if (type == 'email') {
        this.submitEmail(values);
      } else if (type == 'password') {
        this.submitPassword(values);
      } else if (type == 'paypwd') {
        this.submitPaypwd(values);
      } else if (type == 'sex') {
        this.submitSex(values);
      } else {
        app.globalData.confirmBox("处理类型出错:" + type);
      }
    },
    submitNickname: function (values) {
      if (!values.nickname) {
        app.globalData.showTextWarining("请输入昵称");
        return false;
      }

      this.requestUpdateUser({
        nickname: values.nickname
      });
    },
    submitMobile: function (values) {
      if (!values.mobile) {
        app.globalData.showTextWarining("请输入手机号");
        return false;
      }

      if (this.canGetCode && !values.mobile_code) {
        app.globalData.showTextWarining("请输入验证码");
        return false;
      }

      this.requestUpdateUser({
        mobile: values.mobile,
        mobile_code: values.mobile_code
      });
    },
    submitEmail: function (values) {
      if (!values.email) {
        app.globalData.showTextWarining("请输入邮箱");
        return false;
      }

      if (values.email.indexOf('@') < 0) {
        app.globalData.showTextWarining("邮箱格式不正确");
        return false;
      }

      this.requestUpdateUser({
        email: values.email
      });
    },
    submitPassword: function (values) {
      var hasPw = this.user.password;

      if (hasPw && !values.old_password) {
        app.globalData.showTextWarining("请输入旧密码");
        return false;
      }

      if (!values.new_password) {
        app.globalData.showTextWarining("请输入新密码");
        return false;
      }

      if (!values.confirm_password) {
        app.globalData.showTextWarining("请输入确认密码");
        return false;
      }

      if (values.new_password.length < 6 || values.new_password.length > 18) {
        app.globalData.showTextWarining("密码长度不合法");
        return false;
      }

      if (values.new_password !== values.confirm_password) {
        app.globalData.showTextWarining("两次密码不一致");
        return false;
      }

      request.post('/api/user/password', {
        data: {
          old_password: md5('TPSHOP' + values.old_password),
          new_password: md5('TPSHOP' + values.new_password)
        },
        success: function (res) {
          app.globalData.showSuccess('修改成功', function () {
            uni.navigateBack();
          });
        }
      });
    },
    submitPaypwd: function (values) {
      if (!values.paypwd_mobile) {
        app.globalData.showTextWarining("请输入手机号");
        return false;
      } // if (this.data.is_send_code != 0){


      if (this.canGetCode && !values.paypwd_code) {
        app.globalData.showTextWarining("请输入验证码");
        return false;
      } // }


      if (!values.paypwd) {
        app.globalData.showTextWarining("请输入新密码");
        return false;
      }

      if (!values.paypwd_confirm) {
        app.globalData.showTextWarining("请输入确认密码");
        return false;
      }

      if (values.paypwd.length < 6 || values.paypwd.length > 18) {
        app.globalData.showTextWarining("密码长度不合法");
        return false;
      }

      if (values.paypwd !== values.paypwd_confirm) {
        app.globalData.showTextWarining("两次密码不一致");
        return false;
      }

      request.post('/api/user/paypwd', {
        data: {
          new_password: md5('TPSHOP' + values.paypwd),
          mobile: values.paypwd_mobile,
          paypwd_code: values.paypwd_code
        },
        success: function (res) {
          app.globalData.showSuccess('修改成功', function () {
            uni.navigateBack();
          });
        }
      });
    },
    submitSex: function (values) {
      if (this.user.sex == 0) {
        app.globalData.showTextWarining("请选择性别");
        return false;
      }

      this.requestUpdateUser({
        sex: this.user.sex
      });
    },
    changeGender: function (e) {
      var gender = e.currentTarget.dataset.gender;
      var sexNum = gender == 'boy' ? 1 : 2;
      this.setData({
        'user.sex': sexNum
      });
    },
    requestUpdateUser: function (data) {
      request.post('/api/user/updateUserInfo', {
        data: data,
        success: function (res) {
          if (uni.getStorageSync('withdrawals_pay')) {
            app.globalData.showSuccess('绑定成功', function () {
              uni.removeStorageSync('withdrawals_pay');
              uni.reLaunch({
                url: '/pages/user/index/index'
              });
            });
          } else {
            uni.navigateBack();
          }
        }
      });
    },
    setMobile: function (e) {
      this.user.mobile = e.detail.value;
    },
    getCode: function (e) {
      let that = this;
      common.sendSmsCode(that.user.mobile, null, function (res) {
        if (res.data.status == 1) {
          that.setData({
            is_send: true
          });
          that.countDown();
        }
      });
    },
    countDown: function () {
      let that = this;
      let countDownNum = that.countDownNum;
      that.setData({
        timer: setInterval(function () {
          if (countDownNum == 0) {
            clearInterval(that.timer);
            that.setData({
              is_send: false,
              countDownNum: 60
            });
            return;
          } else {
            countDownNum--;
            that.setData({
              countDownNum: countDownNum
            });
          }
        }, 1000)
      });
    }
  }
};
</script>
<style>
page{
    background-color: white;
}
.user-container{
    padding-top: 100rpx;
}
.label-input{
    font-size: 28rpx;
    width: 680rpx;
    margin: 0 35rpx;
    line-height: 90rpx;
    border: 1rpx solid #f3f3f3;
    border-radius: 10rpx;
}
.label{
    box-sizing: border-box;
    float: left;
    padding: 0 25rpx;
}
.input{
    box-sizing: border-box;
    float: left;
    height: 90rpx;
    width: 500rpx;
    padding-right: 5rpx;
}
.simple{
    border: 0;
    border-radius: 0;
    border-bottom: 1rpx solid #f3f3f3;
}
.submit{
    width: 600rpx;
    margin: 0 75rpx;
    margin-top: 50rpx;
    background-color: #ff6a00;
    color: white;
    line-height: 90rpx;
    border-radius: 10rpx;
}
.verify-box{
    font-size: 28rpx;
    width: 680rpx;
    margin: 0 35rpx;
    line-height: 90rpx;
}
.verify-input{
    box-sizing: border-box;
    float: left;
    height: 90rpx;
    width: 400rpx;
    padding-left: 10rpx;
}
.verify-btn{
    box-sizing: border-box;
    float: right;
    line-height: 90rpx;
    padding: 0 10rpx;
    background-color: #ff6a00;
    color: white;
    border-radius: 10rpx;
}
.gender-box{
    width: 50%;
    float: left;
    padding: 100rpx 0 200rpx 0;
}
.gender{
    background-repeat: no-repeat !important;
    background-size: 4.48rem !important;
    width: 2.13333rem;
    height: 2.73067rem;
    margin: 0 auto;
}
.boy {
    background-position: 0 0 !important;
}
.girl {
    background-position: 0 -2.92267rem !important;
}
.boy-click {
    background-position: -2.34667rem 0 !important;
}
.girl-click {
    background-position: -2.368rem -2.92267rem !important;
}
.countDownNum{
  background-color:#999;
  width:36%;
  text-align: center;
}

</style>